<template>
  <div class="card amap-example">
    <el-button @click="handlerSearch">查询</el-button>
    <div class="amap-explore">
      <AmapUI ref="amapUIRef" :opts="opts" :modules="modules" />
    </div>
  </div>
</template>

<script setup lang="ts" name="amapExample">
import { ref, reactive, nextTick } from "vue";
import AmapUI from "@/components/AmapUI/index.vue";
import type { AmapModulesOptions, MapBaseOptions } from "@/components/AmapUI/types";

const opts = reactive<MapBaseOptions>({
  center: [116.397428, 39.90923],
  zoom: 4
});
const modules = ref<AmapModulesOptions[]>([]);

const amapUIRef = ref<InstanceType<typeof AmapUI> | null>(null);
const handlerSearch = () => {
  modules.value = [
    {
      name: "Marker",
      markers: [
        {
          position: [116.332185, 38.220185],
          title: "测试标记点",
          label: {
            content: "测试标记点label",
            direction: "bottom"
          },
          // 额外默认配置，用于marker点标记绑定InfoWindow
          // relieveInfoWindow：是否解除marker点击事件绑定InfoWindow， 默认false： 默认Marker点关联InfoWindow模块，会自动创建信息窗口
          // 若所有的信息弹窗都依赖于Marker模块，则不需要再次传入InfoWindow模块，
          extData: {
            relieveInfoWindow: false,
            infoWindowOpts: {
              isCustom: true,
              autoMove: true,
              closeWhenClickMap: true,
              offset: [-50, -40],
              content: `
                <div style="width: 400px; background-color: #fff; color: #606262; font-size: 14px">
                  <div style="display: flex; align-items: center; padding: 10px; background-color: #C0C4CC">
                    <span>头部</span>
                  </div>
                  <div style="padding: 10px">
                    <div style="display: flex; justify-content: space-between; padding: 5px 0">
                      <label style="width: 50%">
                        定位时间:
                        <span style="color: #97a8be">2025-07-16 16:18:22</span>
                      </label>
                    </div>
                    <div style="display: flex; justify-content: space-between; padding: 5px 0">
                      <label style="width: 50%">
                        车辆速度:
                        <span style="color: #97a8be">10km/h</span>
                      </label>
                    </div>
                    <div style="display: flex; justify-content: space-between; padding: 5px 0">
                      <label style="width: 50%">
                        联系人姓名:
                        <span style="color: #97a8be">张三</span>
                      </label>
                    </div>
                    <div style="display: flex; justify-content: flex-end; cursor: pointer; color: #52a3ff" onclick="window.vm.handleClick()">查看轨迹</div>
                  </div>
                </div>
              `
            }
          }
        },
        {
          position: [116.342185, 38.230185],
          title: "测试标记点",
          label: {
            content: "测试标记点label",
            direction: "bottom"
          },
          // 额外默认配置，用于marker点标记绑定InfoWindow
          // relieveInfoWindow：是否解除marker点击事件绑定InfoWindow， 默认false： 默认Marker点关联InfoWindow模块，会自动创建信息窗口
          // 若所有的信息弹窗都依赖于Marker模块，则不需要再次传入InfoWindow模块，
          extData: {
            relieveInfoWindow: false,
            infoWindowOpts: {
              isCustom: true,
              autoMove: true,
              closeWhenClickMap: true,
              offset: [-50, -40],
              content: `
                <div style="width: 400px; background-color: #fff; color: #606262; font-size: 14px">
                  <div style="display: flex; align-items: center; padding: 10px; background-color: #C0C4CC">
                    <span>头部</span>
                  </div>
                  <div style="padding: 10px">
                    <div style="display: flex; justify-content: space-between; padding: 5px 0">
                      <label style="width: 50%">
                        定位时间:
                        <span style="color: #97a8be">2025-07-16 16:18:22</span>
                      </label>
                    </div>
                    <div style="display: flex; justify-content: space-between; padding: 5px 0">
                      <label style="width: 50%">
                        车辆速度:
                        <span style="color: #97a8be">10km/h</span>
                      </label>
                    </div>
                    <div style="display: flex; justify-content: space-between; padding: 5px 0">
                      <label style="width: 50%">
                        联系人姓名:
                        <span style="color: #97a8be">张三</span>
                      </label>
                    </div>
                    <div style="display: flex; justify-content: flex-end; cursor: pointer; color: #52a3ff" onclick="window.vm.handleClick()">查看轨迹</div>
                  </div>
                </div>
              `
            }
          }
        }
      ],
      events: [
        {
          name: "dblclick",
          cb: ($event, f) => {
            console.log(111, $event, f);
          }
        },
        {
          name: "click",
          cb: ($event, f) => {
            console.log(222, $event, f);
          }
        }
      ],
      extra: {
        coordTransform: "wgs84ToGcj02"
      }
    }
  ];
  console.log(modules.value, "modules");
  nextTick(() => {
    amapUIRef.value?.loadModules();
  });
};
</script>
<style lang="scss" scoped>
.amap-example {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}
.amap-explore {
  width: calc(100% - 100px);
  height: 100%;
}
</style>
